<template>
    <div class="hoursCount">
        <div class="commonSearch">
            <div class="commonContent" style="height: 40px;border:none">
                <el-form :model="searchForm" label-width="80px" size="mini" style="flex:22">
                    <el-form-item label="设备分组">
                        <tree-select @getId="getId" :clearable='false'></tree-select>
                    </el-form-item>
                    <el-form-item label="期间">
                        <el-date-picker v-model="daterange" type="date" :clearable='false' @change="handleDateRange"></el-date-picker>
                    </el-form-item>
                </el-form>
                <my-button type="primary" icon="el-icon-search" size="mini"
                    style="flex-shirk:0;height:28px;width:73px;margin-left:20px" v-throttle:200='searchList'>查询
                </my-button>
            </div>
        </div>

        <!-- 表格 -->
        <table-list ref='tableList' :searchForm='searchForm' style="margin-top:20px">
        </table-list>
    </div>
</template>

<script>
    import tableList from './tableList.vue'
    export default {
        data() {
            return {
                searchForm: {
                    groupId: '',
                    startTime: '',
                    endTime: '',
                    page: 1,
                    limit: 10
                },
                daterange: new Date(),
                start: 'yyyy-MM-dd 00:00:00',
                end: 'yyyy-MM-dd 23:59:59'
            }
        },
        components: {
            tableList
        },
        mounted() {
            const start = new Date().dateFormat(this.start)
            const end = new Date().dateFormat(this.end)
            this.searchForm.startTime = start
            this.searchForm.endTime = end
        },
        methods: {
            //分组id
            getId(groupId) {
                this.searchForm.groupId = groupId
                this.$refs.tableList.getHourCountReport(this.searchForm)
            },
            searchList() {
                this.$refs.tableList.getHourCountReport(this.searchForm)
            },
            handleDateRange(val){
                this.searchForm.startTime = val.dateFormat(this.start)
                this.searchForm.endTime = val.dateFormat(this.end)
            },
        }
    }
</script>

<style lang="less" scoped>
    .hoursCount {
        .commonSearch {
            position: relative;

            .commonContent {
                .el-form-item--mini.el-form-item {
                    width: 33%;

                    .el-select {
                        width: 100%;
                    }
                }

                ::v-deep .el-date-editor.el-input {
                    width: 100%;
                }
            }
        }
    }
</style>